<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo @$title;?> </title>
<meta name="keywords" content="<?php echo CON_KEYWORDS;?>" />
<meta name="description" content="<?php echo CON_DESCRIPTION;?>" />
<meta property="qc:admins" content="407256713346734116375" />
<meta property="wb:webmaster" content="f759eeb219560233" />

<link rel="shortcut icon" href="/favicon.ico" />

<link href="/static/css/shop.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/static/css/jquery-ui.css" />

<script src="/static/js/jquery.js"></script>
<script src="/static/js/ie6.js"></script>
<script src="/static/js/jquery-ui.js"></script>
<script src="/static/js/jquery.form.js"></script>

<script src="/static/js/common.js"></script>
<script src="/static/js/L_slide.js" type="text/javascript"></script>


<script type="text/javascript" src="/static/js/jquery.1.4.2-min.js"></script>
<style type="text/css">
/* reset */
body{font:12px/18px "宋体",arial,sans-serif;color:#585858;}
body,div,p,span,form,iframe,table,td,th,input,textarea,button,label,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%; }
ul,ol,li,dl{list-style-type:none;}
em,i,dfn,cite,strong,small{font-style:normal;} 
img{border:0;}
fieldset,button,input,select,option{vertical-align:middle;font:12px/18px "宋体",arial,sans-serif;}
table{border-collapse:collapse;border-spacing:0}
textarea{resize:none}
/* color */
a:link,a:visited{color:#575757;text-decoration:none;}
a:hover{color:#ef4165;text-decoration:none;}
a:active{color:#1d7400;}
/* clearfix */
.clearfix:after{ visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
*html .clearfix{ zoom:1;}

.preview{width:360px; height:240px; float: left;}
/* smallImg */
.smallImg{position:relative; height:52px; margin-top:1px; background-color:#F1F0F0; padding:6px 5px; width:390px; overflow:hidden;float:left;}
.scrollbutton{width:14px; height:50px; overflow:hidden; position:relative; float:left; cursor:pointer; }
.scrollbutton.smallImgUp , .scrollbutton.smallImgUp.disabled{background:url(images/d_08.png) no-repeat;}
.scrollbutton.smallImgDown , .scrollbutton.smallImgDown.disabled{background:url(images/d_09.png) no-repeat; margin-left:375px; margin-top:-50px;}

#imageMenu {height:50px; width:360px; overflow:hidden; margin-left:0; float:left;}
#imageMenu li {height:50px; width:60px; overflow:hidden; float:left; text-align:center;}
#imageMenu li img{width:50px; height:50px;cursor:pointer;}
#imageMenu li#onlickImg img, #imageMenu li:hover img{ width:44px; height:44px; border:3px solid #959595;}
/* bigImg */
.bigImg{position:relative; float:left; width:360px; height:240px; overflow:hidden;}
.bigImg #midimg{width:360px; height:240px;}
.bigImg #winSelector{width:100px; height:100px;}
#winSelector{position:absolute; cursor:crosshair; filter:alpha(opacity=15); -moz-opacity:0.15; opacity:0.15; background-color:#000; 

}
/* bigView */
#bigView{position:absolute;
 overflow: hidden; z-index:999;}
#bigView img{position:absolute;}
</style>

</head>


















<div class="mall_con">
	<?php include './application/views/shop/shop_left.php'; ?>
	<!--End con_l-->
  
  <div class="mall_con_r">
     <div class="position"><a href="/shop">首页</a>
         <?php for($i=count($parents)-1;$i>-1;$i--){?>
             >> <a href="/shop/arr.html?ptype=<?php echo $parents[$i]['id'];?>"><?php echo $parents[$i]['title'];?></a>
         <?php }?>
         >> <a href="#"><?php echo $info['pname'];?></a>
     </div>
   <div class="pd_con">
       <div class="pd_detail">

           <div class="preview">
	            <div id="vertical" class="bigImg">
		            <img src="/static/data/upfiles/images/guarantee/attestation_5546ecacbe0f9.jpg" width="360" height="240" alt="" id="midimg" />
		            <div style="display:none;" id="winSelector"></div>
                </div><!--bigImg end-->
		
                <div id="bigView" style="display:none;">
                    <img width="720" height="480" alt="" src="" />
                </div>
                <div>
                    <?php foreach($att_list as $list){?>
                        <img src="/<?php echo $list['pic'];?>" width="50" height="50" onclick="changeImg(this);" id="test"/>
                    <?php }?>
                </div>
            </div>
       	
      <!--
      	<img alt="" src="<?php echo $info['pimg'];?>" width="360" height="240" />
      --> 	
        
        
        
        
        
        
        <h2><?php echo $info['pname'];?><span style="color:#999; font-size:14px;">（商品编号：<?php echo $info['id'];?>）</span></h2>
		<form id="info_form" action="/shop/car.html" method="post">
		<input type="hidden" name="pid" value="<?php echo $info['id'];?>">
         <p>普通会员积分价：<span><?php echo $info['pcredit'];?></span></p>
         <p> VIP&nbsp;会员优惠价：<span><?php echo $info['pvipcredit'];?></span></p>
         <p >剩余：<span><?php echo $info['psurp'];?></span>个
         </p> 
         <p>已兑换：<span style="color:#333"><?php echo $info['pconvert'];?></span>个</p>
         <p>兑换数量： <span class="num"><input id="sale_count" name="pnum" type="text" value="1" style="border: 1px solid rgb(220, 220, 220); width: 36px; height: 20px; line-height: 20px; text-align: center;"></span>件</p>
         <div class="pd_duihuan" ><a href="javascript:void(0)" class="gsdshop_orange" onclick="document.getElementById('info_form').submit();"><img src="/static/images/bt-pd-duihuan.png" width="126" height="40" /></a></div>
		 </form>
      </div>

       <div class="pd_list">
         <div class="pd_list_tab">
           <span id="sl1" class="active" ><a href="javascript:void(0);" onclick="change(1)">产品详情</a></span>
           <span id="sl2"><a href="javascript:void(0);" onclick="change(2)">兑换记录</a></span>
         </div>
         <div id="dv1" class="pd_list_con">
			<?php echo $info['pdesc'];?>
          </div>
		 
		  <div id="dv2" class="pd_list_con" style="display: none;">
			<table style="width:650px;margin-top:20px;margin-left:auto;margin-right:auto;font-size:14px;">
			   <tr>
				 <th style="border-left:1px solid #2a84c3;">用户名</th>
				 <th>商品名称</th>
				 <th>兑换数量</th>
				 <th>兑换积分</th>
				 <th style="border-right:1px solid #2a84c3;">兑换日期</th>
			  </tr>
			  <?php foreach ($olist as $v){?>
			  <tr class="even">
				 <td style="border-left:1px solid #2a84c3;"><?php echo strdisplay_start($v['username'],4);?></td>
				 <td><?php echo $v['pname'];?></td>
				 <td>x<?php echo $v['pnum'];?></td>
				 <td><?php echo $v['total_price'];?></td>
				 <td style="border-right:1px solid #2a84c3;"><?php echo date('Y-m-d H:i',$v['add_time']);?></td>
			  </tr>
			  <?php }?>
			</table>
          </div>
		 
       </div>
	   <script type="text/javascript">
			function change(a){
				if(a==1){
					document.getElementById("sl1").className="active";
					document.getElementById("sl2").className="";
					document.getElementById("dv1").style.display="";
					document.getElementById("dv2").style.display="none";
				}else{
					document.getElementById("sl1").className="";
					document.getElementById("sl2").className="active";
					document.getElementById("dv1").style.display="none";
					document.getElementById("dv2").style.display="";
				}
			}
		</script>
	   <!-- End list-->
    </div>
    </div>
	<!-- End con_r -->	
</div>
<script type="text/javascript">
$(document).ready(function(){
	// 图片上下滚动
	var count = $("#imageMenu li").length - 5; /* 显示 6 个 li标签内容 */
	var interval = $("#imageMenu li:first").width();
	var curIndex = 0;
	
	$('.scrollbutton').click(function(){
		if( $(this).hasClass('disabled') ) return false;
		
		if ($(this).hasClass('smallImgUp')) --curIndex;
		else ++curIndex;
		
		$('.scrollbutton').removeClass('disabled');
		if (curIndex == 0) $('.smallImgUp').addClass('disabled');
		if (curIndex == count-1) $('.smallImgDown').addClass('disabled');
		
		$("#imageMenu ul").stop(false, true).animate({"marginLeft" : -curIndex*interval + "px"}, 600);
	});	
	// 解决 ie6 select框 问题
	$.fn.decorateIframe = function(options) {
        if ($.browser.msie && $.browser.version < 7) {
            var opts = $.extend({}, $.fn.decorateIframe.defaults, options);
            $(this).each(function() {
                var $myThis = $(this);
                //创建一个IFRAME
                var divIframe = $("<iframe />");
                divIframe.attr("id", opts.iframeId);
                divIframe.css("position", "absolute");
                divIframe.css("display", "none");
                divIframe.css("display", "block");
                divIframe.css("z-index", opts.iframeZIndex);
                divIframe.css("border");
                divIframe.css("top", "0");
                divIframe.css("left", "0");
                if (opts.width == 0) {
                    divIframe.css("width", $myThis.width() + parseInt($myThis.css("padding")) * 2 + "px");
                }
                if (opts.height == 0) {
                    divIframe.css("height", $myThis.height() + parseInt($myThis.css("padding")) * 2 + "px");
                }
                divIframe.css("filter", "mask(color=#fff)");
                $myThis.append(divIframe);
            });
        }
    }
    $.fn.decorateIframe.defaults = {
        iframeId: "decorateIframe1",
        iframeZIndex: -1,
        width: 0,
        height: 0
    }
    //放大镜视窗
    $("#bigView").decorateIframe();
    //点击到中图
    var midChangeHandler = null;
	
    $("#imageMenu li img").bind("click", function(){
		if ($(this).attr("id") != "onlickImg") {
			midChange($(this).attr("src").replace("small", "mid"));
			$("#imageMenu li").removeAttr("id");
			$(this).parent().attr("id", "onlickImg");
		}
	}).bind("mouseover", function(){
		if ($(this).attr("id") != "onlickImg") {
			window.clearTimeout(midChangeHandler);
			midChange($(this).attr("src").replace("small", "mid"));
			$(this).css({ "border": "3px solid #959595" });
		}
	}).bind("mouseout", function(){
		if($(this).attr("id") != "onlickImg"){
			$(this).removeAttr("style");
			midChangeHandler = window.setTimeout(function(){
				midChange($("#onlickImg img").attr("src").replace("small", "mid"));
			}, 1000);
		}
	});
    function midChange(src) {
        $("#midimg").attr("src", src).load(function() {
            changeViewImg();
        });
    }
    //大视窗看图
    function mouseover(e) {
        if ($("#winSelector").css("display") == "none") {
            $("#winSelector,#bigView").show();
        }
        $("#winSelector").css(fixedPosition(e));
        e.stopPropagation();
    }
    function mouseOut(e) {
        if ($("#winSelector").css("display") != "none") {
            $("#winSelector,#bigView").hide();
        }
        e.stopPropagation();
    }
    $("#midimg").mouseover(mouseover); //中图事件
    $("#midimg,#winSelector").mousemove(mouseover).mouseout(mouseOut); //选择器事件

    var $divWidth = $("#winSelector").width(); //选择器宽度
    var $divHeight = $("#winSelector").height(); //选择器高度
    var $imgWidth = $("#midimg").width(); //中图宽度
    var $imgHeight = $("#midimg").height(); //中图高度
    var $viewImgWidth = $viewImgHeight = $height = null; //IE加载后才能得到 大图宽度 大图高度 大图视窗高度

    function changeViewImg() {
        $("#bigView img").attr("src", $("#midimg").attr("src").replace("mid", "big"));
    }
    changeViewImg();
    $("#bigView").scrollLeft(0).scrollTop(0);
    function fixedPosition(e) {
        if (e == null) {
            return;
        }
        var $imgLeft = $("#midimg").offset().left; //中图左边距
        var $imgTop = $("#midimg").offset().top; //中图上边距
        X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X
        Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y
        X = X < 0 ? 0 : X;
        Y = Y < 0 ? 0 : Y;
        X = X + $divWidth > $imgWidth ? $imgWidth - $divWidth : X;
        Y = Y + $divHeight > $imgHeight ? $imgHeight - $divHeight : Y;

        if ($viewImgWidth == null) {
            $viewImgWidth = $("#bigView img").outerWidth();
            $viewImgHeight = $("#bigView img").height();
            if ($viewImgWidth < 200 || $viewImgHeight < 200) {
                $viewImgWidth = $viewImgHeight = 800;
            }
            $height = $divHeight * $viewImgHeight / $imgHeight;
            $("#bigView").width($divWidth * $viewImgWidth / $imgWidth);
            $("#bigView").height($height);
        }
        var scrollX = X * $viewImgWidth / $imgWidth;
        var scrollY = Y * $viewImgHeight / $imgHeight;
        $("#bigView img").css({ "left": scrollX * -1, "top": scrollY * -1 });
        $("#bigView").css({ "top": 75, "left": $(".preview").offset().left + $(".preview").width() + 15 });

        return { left: X, top: Y };
    }
});

    function changeViewImg() {
        $("#bigView img").attr("src", $("#midimg").attr("src").replace("mid", "big"));
    }

    function changeImg(img){
        img = $(img);
        console.log(img.attr('src'));
        var src = img.attr('src');
        var displayImg = $('#midimg');
        displayImg.attr('src',src);
        changeViewImg();
    }
</script>
<?php include './application/views/common/footer.php'; ?>


